<template>
  <div style="margin-top: 30px">
    <el-row>
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header" style="display: flex;justify-content: space-between">
              <span>评论分析</span>
              <el-button type="primary" @click="goBack">返回</el-button>
            </div>
          </template>
          <el-descriptions direction="vertical" column="4">
            <el-descriptions-item align="center" label="用户总数" label-class-name="my-label" class-name="my-content">
              {{totalCount}}
            </el-descriptions-item>
            <el-descriptions-item label="管理员数" align="center">{{gly}}</el-descriptions-item>
            <el-descriptions-item label="商家数量" align="center">{{sj}}</el-descriptions-item>
            <el-descriptions-item label="普通用户数" align="center">{{ptyh}}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>用户类型分析</span>
            </div>
          </template>
          <div id="userTypeCharts" ref="userTypeChartRef" style="height: 320px;"></div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>星级评论分析</span>
            </div>
          </template>
          <div id="starCharts" ref="starChartRef" style="height: 300px;"></div>
          <div style="text-align: center;color: #f58147">好评率<el-icon><Select /></el-icon></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {ref,onMounted} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';


const totalCount = ref(0);  //用户总数
const gly = ref(0);         //管理员
const sj = ref(0);          //商家
const ptyh = ref(0);        //普通用户

const userTypeChartRef = ref();   //用户类型图表 组件
const starChartRef = ref();       //星级评论图表 组件

onMounted(async () => {
  const {data} = await axios.get(`/api/pingjia/allpj`)
  console.log(data);

  const userTypeData = data.data.userType;
  const pingFenData = data.data.pingFenType;

  // 图表绘制
  initUserTypeCharts(userTypeData);
  initPingFenCharts(pingFenData);
});

//-----------------------------  用户类型  柱状图 ---------------------------------
// 绘制用户类型图表
const initUserTypeCharts = (userTypeData) => {
  const chartDom = userTypeChartRef.value;

  const myChart = echarts.init(chartDom);

  const option = {
    title: {
      text: ''
    },
    tooltip: {},
    xAxis: {
      data: ['管理员', '商家', '普通用户']
    },
    yAxis: {},
    series: [
      {
        name: '人数',
        type: 'bar',
        data: prepareUserTypeData(userTypeData)
      }
    ]
  };
  myChart.setOption(option);
}

// 清洗用户类型数据
const prepareUserTypeData = (data) => {
  let userTypeData = [];
  data.forEach(item => {
    if (item.yhsf == '0') {
      userTypeData[0] = item.count || 0;
      gly.value = item.count;
    } else if (item.yhsf == '6') {
      userTypeData[1] = item.count || 0;
      sj.value = item.count;
    } else if (item.yhsf == '3') {
      userTypeData[2] = item.count || 0;
      ptyh.value = item.count;
    }
  });

  totalCount.value = gly.value + sj.value + ptyh.value;
  return userTypeData;
}

//-----------------------------评分数量  饼图 ---------------------------------
const initPingFenCharts = (pingFenData) => {
  const chartDom = starChartRef.value;
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '评分分布',
        type: 'pie',
        radius: ['20%', '80%'], // 环形图配置
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 8, // 圆角配置
          borderColor: '#fff',
          borderWidth: 2
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'bold'
          }
        },
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}: {c}条评价 ({d}%)',
          fontSize: 12
        },
        labelLine: {
          show: true,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        data: preparePingFenData(pingFenData)
      }
    ]
  };
  myChart.setOption(option);
}

// 清洗评分数据
const preparePingFenData = (data) => {
  let pingFenData = [];
  data.forEach(item => {
    if(item.sjpf == 1){
      pingFenData.push({
        name: '1星',
        value: item.count
      });
    }else if(item.sjpf == 2){
      pingFenData.push({
        name: '2星',
        value: item.count
      });
    }else if(item.sjpf == 3){
      pingFenData.push({
        name: '3星',
        value: item.count
      });
    }else if(item.sjpf == 4){
      pingFenData.push({
        name: '4星',
        value: item.count
      });
    }else if(item.sjpf == 5){
      pingFenData.push({
        name: '5星',
        value: item.count
      });
    }
  });
  return pingFenData;
}

//返回上一页
const emit = defineEmits(['close'])
const goBack = () => {
  emit('close');
}
</script>

<style scoped>
.el-row {
  margin-bottom: 10px;
}

.card-header {
  color: green;
  font-size: 18px;
  letter-spacing: 1px;
}

:deep(.my-label) {
  color:green;
}

:deep(.my-content) {
  color: green;
}
</style>